<template>
	<view class="home-container">
		<uni-section title="" type="" padding>
			<uni-grid :column="3" :highlight="true">
				<uni-grid-item v-for="(item, index) in list" :key="index" @click.native="goToList(item)">
					<view class="grid-item-box" style="background-color: #fff; text-align: center;">
						<view style="width:120upx;height: 120upx;">
							<image :src="item.url" class="image" mode="widthFix" />
						</view>
						<text class="text">{{item.productName}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>

<script>
	import {
		getProduct
	} from "@/api/infoList/index"
	export default {
		data() {
			return {
				list: []
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				//显示加载框
				uni.showLoading({
					title: '加载中'
				});
				getProduct().then((res) => {
					this.list = res || []
					//隐藏加载框
					uni.hideLoading();
					this.list.forEach((item) => {
						this.$set(item, 'url', '/static/images/carVehicle.jpeg')
					})
				})
			},
			goToList(item) {
				uni.navigateTo({
					url: `/pages/infoList/index?productCode=${item.productCode}&productName=${item.productName}`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home-container {
		height: 100vh;
		background: #ffff;

		/deep/ .uni-section-content {
			padding: 150upx 20upx 20upx 20upx !important;
		}

		.grid-item-box {
			height: 100% !important;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: space-around;
			border: none;
		}

		.grid-item-box:nth-child(1) {
			// border-right:2upx solid #ccc !important;
			// border-radius: 20upx;
		}

		/deep/ .uni-grid--border {
			border: none !important;
		}

		/deep/ .uni-grid-item--border-top {
			border: none !important;
		}
	}
</style>